<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 500px;
            height: 400px;
            border: 2px solid;
            border-collapse: collapse;
            text-align: center;
        }

        td {
            border: 1px solid;
        }

        /* table tr:nth-child(odd){
            background-color: #d9d7d7;

        } */

        .bgColor {
            background-color: beige !important;
        }
    </style>
</head>

<body>

    <table>
        <tr>
            <td>lorem001</td>
            <td>lorem002</td>
            <td>lorem003</td>
            <td>lorem004</td>
        </tr>
        <tr>
            <td>lorem001</td>
            <td>lorem002</td>
            <td>lorem003</td>
            <td>lorem004</td>
        </tr>
        <tr>
            <td>lorem001</td>
            <td>lorem002</td>
            <td>lorem003</td>
            <td>lorem004</td>
        </tr>
        <tr>
            <td>lorem001</td>
            <td>lorem002</td>
            <td>lorem003</td>
            <td>lorem004</td>
        </tr>
        <tr>
            <td>lorem001</td>
            <td>lorem002</td>
            <td>lorem003</td>
            <td>lorem004</td>
        </tr>
    </table>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
    <script>

        $('tr:even').css('background-color', '#d9d7d7');

        // $('table').on('mouseenter', 'tr', function () {
        //     let color= $(this).css('background-color');
        //     $(this).css('background-color', 'beige');
        //     $('table').on('mouseleave', 'tr', function () {
        //         $(this).css('background-color', color);
        //     })
        // })



        // $('table').on('mouseenter', 'tr', function () {
        //     $(this).addClass('bgColor');
        //     $('table').on('mouseleave', 'tr', function () {
        //         $(this).removeClass('bgColor')
        //     })
        // })
        
        // let color;
        // $("tr").hover(
        //     function () {
        //         // $(this).addClass("bgColor");
        //         color = $(this).css('background-color');
        //         $(this).css('background-color', 'beige');
        //     },
        //     function () {
        //         // $(this).removeClass("bgColor");
        //         $(this).css('background-color', color);
        //     }
        // );

    </script>

</body>

</html>